<template>
  <div id="home">
    <SamHeader></SamHeader>
    <div class="home-up">
      <img src="../../assets/pictures/index/index-background-picture.webp" alt="">
      <button>立 即 前 往</button>
    </div>

    <MemberCard></MemberCard>
    <GoodsList :goodsNav="goodsNav"></GoodsList>
    <SamFooter></SamFooter>
  </div>
</template> 
<script>
import SamHeader from '@/components/Header/SamHeader.vue';
import MemberCard from '@/components/MemberCard/MemberCard.vue';
import GoodsList from '@/components/GoodsNav/GoodsList.vue';
import SamFooter from '@/components/Footer/SamFooter.vue';
import { mapState } from 'vuex';
export default {
  name: 'SamHome',
  components: {
    SamHeader,
    MemberCard,
    GoodsList,
    SamFooter
  },
  data() {
    return {
    }
  },
  mounted(){
    // 组件一加载，则需要发请求获取商品导航栏数据
    this.getGoodsNav()
  },
  computed:{
    ...mapState('home',['goodsNav'])
  },
  methods:{
    getGoodsNav(){
      this.$store.dispatch('home/getGoodsNav')
    }
  }
};
</script>

<style lang='less' scoped>
#home {
  .home-up {
    position: relative;
    img {
      width: 100%;
      height: 45rem;
    }

    button {
      width: 13rem;
      position: absolute;
      color: rgb(32, 37, 104);
      font-size: 1.8rem;
      font-weight: bold;
      background-color: goldenrod;
      padding: 0.5rem;
      border: none;
      border-radius: 1rem;
      top: 85%;
      // 实现水平居中
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>